<template>
  <div>
    <el-card class="box-construction" shadow="always">
      <div class="box-title box-title-position">
        <div>周报</div>
        <el-button class="add-btn clearfix" size="medium" type="primary" @click="addClassic()">写周报</el-button>
      </div>
      <el-table
        v-loading="loading"
        :header-cell-style="{background:'#eef1f6',color:'#606266'}"
        :data="tableData"
        border
        style="width: 100%;margin-top:25px"
      >
        <el-table-column :show-overflow-tooltip="true" prop="project_no" label="项目编号" width="130"></el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="project_name" label="项目名称" width="160"></el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="project_pm" label="项目经理" width="80"></el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="project_desc" label="项目概述" width="170"></el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="curr_moth_plan" label="本月计划"></el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="week" label="周" width="80">
          <template slot-scope="scope">
            <span>第 {{scope.row.week}} 周</span>
          </template>
        </el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          prop="content"
          label="本周工作内容及完成率"
          min-width="200"
        ></el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          prop="next_content"
          label="下周工作计划及完成率"
          min-width="200"
        ></el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          prop="main_content"
          label="重大问题及风险"
          width="200"
        >
          <template slot-scope="scope">{{scope.row.main_content?scope.row.main_content:"暂无"}}</template>
        </el-table-column>
        <el-table-column prop="version" label="操作" width="200">
          <template slot-scope="scope">
            <el-button size="small" icon="el-icon-edit" @click="editClassic(scope.row)">编辑</el-button>
            <el-button size="small" icon="el-icon-delete" @click="delClsaaic(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="box-page"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="pagination.currentPage"
        :page-sizes="[5,10, 20, 30, 40]"
        :page-size="pagination.pageSize"
        layout="sizes, prev, pager, next"
        :total="pagination.total"
      ></el-pagination>
    </el-card>
    <ClassicForm
      ref="form"
      v-if="visible"
      :title="formTitle"
      :datas.sync="editRow"
      :visible.sync="visible"
      :baseStyle="baseStyle"
      :saveForm="submit"
      :isAdd="isAdd"
      :uid="uid"
    />
  </div>
</template>

<script>
import workAPI from "@apis/work";
import { mapState } from "vuex";
import ClassicForm from "./editWeeklyForm/index";
export default {
  data() {
    return {
      loading: false,
      uid: "",
      tableData: [],
      pagination: {
        currentPage: 1,
        pageNo: 1,
        pageSize: 5,
        total: 0,
      },
      editRow: {},
      isAdd: false,
      visible: false,
      baseStyle: {
        width: "140px",
      },
      formTitle: "新增周报",
    };
  },
  components: {
    ClassicForm,
  },
  computed: {
    ...mapState({
      userInfo: "auth",
    }),
  },
  created() {
    this.uid = this.userInfo.user.id;
    this.loading = true;
    this.getWork(1);
  },
  mounted() {},
  methods: {
    getWork(val) {
      let parmars = {
        uid: this.uid, //测试时随意整数
        pageNo: val,
        pageSize: this.pagination.pageSize,
      };
      workAPI
        .getList(parmars)
        .then((res) => {
          this.pagination = {
            currentPage: res.current_page,
            pageNo: res.current_page,
            pageSize: res.per_page,
            total: res.total,
          };
          this.tableData = [...res.data];
          this.loading = false;
        })
        .catch((err) => {
          this.loading = false;
          this.$message.error(err.message);
        });
    },
    handleSizeChange(val) {
      this.pagination.pageSize = val;
      this.loading = true;
      this.getWork(1);
    },
    handleCurrentChange(val) {
      this.loading = true;
      this.getWork(val);
    },

    addClassic() {
      this.formTitle = "新增周报";
      this.isAdd = true;
      this.editRow = { main_content: "暂无" };
      this.visible = true;
    },
    delClsaaic(data) {
      this.$confirm("删除周报, 是否继续?", "提示", {
        closeOnClickModal: false,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          if (this.pagination.pageNo > 1 && this.tableData.length == 1) {
            this.pagination.pageNo = this.pagination.pageNo - 1;
          }
          this.loading = true;
          workAPI
            .weekDel({ id: data.id, uid: data.uid })
            .then((res) => {
              this.getWork(this.pagination.pageNo);
            })
            .catch((err) => {
              this.$message.error(err.message);
            });
        })
        .catch(() => {});
    },
    editClassic(row) {
      this.loading = true;
      workAPI
        .getDetail(row.id)
        .then((res) => {
          this.formTitle = "编辑周报";
          this.editRow = {
            ...res,
            main_content: res.main_content ? res.main_content : "暂无",
          };
          this.isAdd = false;
          this.visible = true;
          this.loading = false;
        })
        .catch((err) => {
          this.loading = false;
          this.$message.error(err.message);
        });
    },
    submit(val) {
      // console.log(val, "formVal");
      this.loading = true;
      if (this.editRow && this.editRow.id) {
        val.id = this.editRow.id;
        workAPI
          .weekEdit({ uid: this.uid, ...val })
          .then((res) => {
            this.$refs.form.cancel();
            this.getWork(this.pagination.pageNo);
          })
          .catch((err) => {
            this.$refs.form.cancelLoading();
            this.$message.error(err.message ? err.message : "请求失败");
          });
      } else {
        workAPI
          .weekAdd({ uid: this.uid, ...val })
          .then((res) => {
            this.$refs.form.cancel();
            this.getWork(1);
          })
          .catch((err) => {
            this.$refs.form.cancelLoading();
            this.$message.error(err.message ? err.message : "请求失败");
          });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.box-title-position {
  div {
    display: inline-block;
  }
  .add-btn {
    float: right;
    margin-top: -3px;
  }
}
.box-construction {
  min-height: 100px;
  .box-page {
    text-align: right;
    padding-top: 40px;
  }
}
</style>